<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
import * as echarts from "echarts";
import { onMounted, inject } from "vue";

const $axios = inject("$axios");
function openWindow() {
  window.open("http://36.99.193.53:90/admin/#/yq/PlaceScanRec")
}
function getChartData(type) {
  $axios.get("hs_result/hsTimeStat", { params: { md: type } }).then((res) => {
    const xAxis = [];
    const data = [];
    res.data.data.forEach((item) => {
      xAxis.push(item.time);
      data.push(item.num);
    });
    option = {
      color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%",
        containLabel: true,
      },
      xAxis: [
        {
          nameTextStyle: {
            color: "#fff",
          },
          type: "category",
          boundaryGap: false,
          data: xAxis,
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,1)",
              width: 0,
              type: "solid",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
          splitLine: {
            //分割线配置
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,1)",
            },
          },
        },
      ],
      yAxis: [
        {
          name: "单位:次",
          type: "value",
          axisLabel: {
            //y轴文字的配置
            textStyle: {
              color: "rgba(219,225,255,1)",
              margin: 15,
            },
            // formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            //y轴线的颜色以及宽度
            show: false,
            lineStyle: {
              color: "rgba(219,225,255,.5)",
              width: 1,
              type: "solid",
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: "rgba(219,225,255,.3)",
            },
          },
        },
      ],
      series: [
        {
          name: "Line 1",
          type: "line",
          stack: "Total",
          smooth: true,
          lineStyle: {
            width: 0,
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 243, 183, 1)",
              },
              {
                offset: 1,
                color: "rgba(1, 241, 182, 0.1)",
              },
            ]),
          },
          emphasis: {
            focus: "series",
          },
          data: data,
        },
      ],
    };

    option && myChart.setOption(option);

    window.addEventListener("resize", myChart.resize);
  });
}

var dom;
var myChart;
var option;

onMounted(() => {
  dom = document.getElementById("yellowRedChart");
  myChart = echarts.init(dom, null, {
    renderer: "canvas",
    useDirtyRect: false,
  });
  getChartData("月");
});
</script>

<template>
  <MoniterItem title="红黄码流调统计" month day @timeUnitClicked="getChartData">
    <template #right>
      <div @click="openWindow">更多》</div>
    </template>
    <template #content>
      <div style="height: 100%" id="yellowRedChart"></div>
    </template>
  </MoniterItem>
</template>
